<template>
  <div class="workbench">
    <div class="income-container">
      <div class="left-wrapper">
        <p class="title">数据</p>
        <div class="pard-data">
          <div class="item">
            <span class="label">学生主页</span>
            <span class="value">123456</span>
          </div>
          <div class="item">
            <span class="label">数据2</span>
            <span class="value">123456</span>
          </div>
          <div class="item">
            <span class="label">数据3</span>
            <span class="value">123456</span>
          </div>
          <div class="item">
            <span class="label">数据4</span>
            <span class="value">123456</span>
          </div>
        </div>
      </div>
      <div class="right-wrapper">
        <p class="quick-entry-title">快捷入口</p>
        <div class="fast-enter">
          <div class="item">
            <a href="">
              <svg-icon icon-class="svg-tg-sd" class="img" />
              <span class="label">入口1</span>
            </a>
          </div>
          <div class="item">
            <a href="">
              <svg-icon icon-class="svg-tg-sd" class="img" />
              <span class="label">入口2</span>
            </a>

          </div>
          <div class="item">
            <a href="">
              <svg-icon icon-class="svg-tg-sd" class="img" />
              <span class="label">入口3</span>
            </a>

          </div>
          <div class="item">
            <a href="/parking/pay">
              <svg-icon icon-class="svg-tg-sd" class="img" />
              <span class="label">入口4</span>
            </a>

          </div>
        </div>
      </div>
    </div>
    <div class="message-container">
      <el-table :data="messageList" height="550" style="width: 100%" class="custom-table">
        <!--<el-table-column prop="title" label="标题" width="180"></el-table-column>-->
        <el-table-column prop="content" label="消息公告" class-name="message-column"></el-table-column>
      </el-table>
    </div>
  </div>

</template>
<script>

import {getAnnouncementAPI} from "@/api/announcement/announcement";

export default {
  data() {
    return {
      messageList: []
    };
  },
  created() {
    this.getMessages();
  },
  methods: {
    getMessages() {
      getAnnouncementAPI().then((res) =>{
        // console.log('message: ',res)
        this.messageList = res.data
      })
    }
  }
}
</script>
<!--scoped-->
<style lang="scss">
.income-container {
  display: flex;
  font-size: 16px;
  padding: 20px;
  background-color: #f5f5f5;
}

.left-wrapper {
  background-color: #fff;
  padding: 20px;
  margin-bottom: 20px;
  min-width: 850px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

//.title { //在不启用scoped时，屏蔽此样式
//  font-size: 18px;
//  color: #333;
//  font-weight: 600;
//  margin-bottom: 15px;
//}

.pard-data {
  display: flex;
  justify-content: space-between;

  .item {
    background-color: #f9f9f9;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px;
    border-radius: 6px;

    .value {
      color: #333;
      font-weight: 600;
      font-size: 24px;
    }

    .label {
      color: #666;
      margin-top: 8px;
    }
  }
}

.right-wrapper {
  flex: 1;
  background-color: #fff;
  padding: 20px;
  margin-bottom: 20px;
  min-width: 260px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.quick-entry-title {
  font-size: 16px;
  color: #333;
  font-weight: 600;
  margin-bottom: 15px;
}

.fast-enter {
  display: flex;
  justify-content: space-around;

  .item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    padding: 10px;
    border-radius: 6px;

    .img {
      width: 44px;
      height: 44px;
      margin-bottom: 9px;
    }

    .label {
      color: #666;
    }
  }
}

// 美化消息列表样式
.message-container {
  margin-top: 30px; // 给消息容器添加一些顶部边距
  background-color: #ccc; // 设置背景颜色
  border-radius: 8px; // 添加圆角边框
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); // 添加阴影效果
  padding: 20px; // 添加内边距
}

//修改鼠标悬停颜色
//.el-table tbody tr:hover > td {
//  background-color: goldenrod !important;
//}

.custom-table {
  border-collapse: collapse; // 确保边框合并
  margin: 0; // 移除默认边距

  &::before,
  &::after {
    background-color: transparent; // 移除默认边框样式
  }

  .el-table__header-wrapper {
    thead {
      tr {
        th {
          background-color: cornflowerblue; // 设置表头背景颜色
          color: black; // 设置表头文字颜色
          font-weight: bold; // 设置表头文字加粗
          border: none; // 移除表头边框
          font-size: 22px;
        }
      }
    }
  }

  .el-table__row {
    background-color: #f9f9f9; // 设置行背景颜色
    border: 1px solid #ebeef5; // 设置行边框
    //cursor: pointer; // 设置鼠标悬停效果

    //&:hover {
    //  background-color: goldenrod; // 设置悬停时的背景颜色
    //}

    td {
      border-bottom: none; // 移除单元格底部边框
    }
  }

  .message-column {
    color: #606266; // 设置消息列文字颜色
    font-size: 18px; // 设置消息列文字大小
  }
}

 //快捷入口样式调整
.fast-enter {
  .item {
    &:hover {
      background-color: greenyellow; // 设置悬停时的背景颜色
      .label {
        color: #409eff; // 设置悬停时文字颜色
      }
    }
  }
}
</style>
